<template>
  <div class="page">
    <div id="YmyThree1"></div>

    <span class="search">
      <span style="margin-left:20px;">重点工作:</span>
      <el-select
        class="userIntSize"
        v-model="quarter"
        clearable
        placeholder="请选择重点工作"
      >
        <!-- <el-option
                v-for="item in quarterList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option> -->
      </el-select>
      <span style="margin-left:20px;">季度:</span>
      <el-select
        class="userIntSize"
        v-model="quarter"
        clearable
        placeholder="请选择季度"
      >
        <el-option
          v-for="item in quarterList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </span>
    <div id="YmyThree2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.yearScore();
  },
  methods: {
    // 全年
    yearScore() {
      var YmyThree1 = this.$echarts.init(document.getElementById("YmyThree1"));
      YmyThree1.setOption({
        color: ["#0099FF"],
        title: {
          text: "迎十四运市级部门第一季度综合排名",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [
            "市发改委",
            "市生态环境局",
            "市政府办公厅",
            "市工信局",
            "市文化旅游局",
            "市教育局",
            "市交通局"
          ],
          axisLabel: {
            formatter: function(value) {
              return value.split("").join("\n");
            }
          }
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [60, 20, 50, 80, 70, 10, 30],
            type: "bar",
            showBackground: true,
            barWidth: 30,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ["#0099FF"];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });

      var YmyThree2 = this.$echarts.init(document.getElementById("YmyThree2"));
      YmyThree2.setOption({
        color: ["#0099FF"],
        title: {
          text: "市工信局十项重点工作中各项任务排名",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [
            "三个经济",
            "绿色发展",
            "迎十四运",
            "先进制造业",
            "文化旅游",
            "乡村振兴"
          ],
          axisLabel: {
            formatter: function(value) {
              return value.split("").join("\n");
            }
          }
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [100, 100, 50, 80, 70, 10],
            type: "bar",
            showBackground: true,
            barWidth: 30,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ["#0099FF"];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  padding-top:40px;
  > .search {
    display: block;
    width: 100%;
    margin: 20px 0;
    margin-top: 40px;
  }
  > div {
    width: 100%;
    height: 440px;
    margin-bottom: 20px;
  }
}
</style>
